<template>
	<view>
		<u-popup :show="show" round="24rpx" mode="center" :safeAreaInsetBottom="false">
			<view class="contentBox" v-if="userInfo">
				<image class="popup-close" src="../static/common/icon_close.png" @click="$emit('close')" />
				<view class="popup-title">解锁</view>
				<view class="popup-list">
					<view class="popup-item" v-if="!userInfo.vip" @click="showVip = true">
						<view class="item-left">
							<image class="icon" src="../static/common/icon_vip3.png" />
							<view class="label">开通VIP免费解锁</view>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="popup-item" v-if="userInfo.vip&&userInfo.unlock_num" @click="subUserUnLock('1')">
						<view class="item-left">
							<image class="icon" src="../static/common/icon_vip3.png" />
							<view class="label">VIP免费解锁剩余{{userInfo.unlock_num}}次</view>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="popup-item" v-if="userInfo.vip&&userInfo.unlock_num==0">
							<view>今日免费解锁次数已使用完毕</view>
					</view>
					<view class="popup-item" @click="subUserUnLock('2')">
						<view class="item-left">
							<image class="icon" src="../static/common/icon_zs.png" />
							<view class="label">100钻石解锁</view>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<u-modal :show="showModal" title="提示" content='是否解锁该用户' @confirm="confirmUserUnLock"
				:showCancelButton="true" @close="showModal=false" @cancel="showModal=false"
				:closeOnClickOverlay="true"></u-modal>
			<vipPopup :show="showVip" @close="showVip=false" @success="vipRechageSuccess"></vipPopup>
		</u-popup>
	</view>
</template>

<script>
	import vipPopup from '@/components/VipPopup.vue';
	export default {
		name: "UnLockPopup",
		data() {
			return {
				userInfo: null,
				showModal: false,
				modelType: null,
				showVip: false
			};
		},
		props: {
			show: {
				type: Boolean,
				default: false //是否显示
			},
			to_user_id: {
				type: [Number, String],
				default: null //解锁用户Id
			}
		},
		components: {
			vipPopup: vipPopup
		},
		watch: {
			show(value) {
				if (value == true) {
					this.getUserInfo()
				}
			},
		},
		methods: {
			vipRechageSuccess() {
				this.showVip = false
				this.getUserInfo()
			},
			subUserUnLock(type) {
				this.modelType = type
				if (type == 1 && this.userInfo.unlock_num == 0) {
					return this.$Toast('剩余解锁次数不足')
				}
				if (type == 2 && this.userInfo.money < 100) {
					 this.$Toast('钻石不足')
					 return this.$Tips('/pages/mine/diamond-recharge')
				}
				// this.showModal = true
				this.confirmUserUnLock()
			},
			confirmUserUnLock() {
				this.$Api['user'].subUserUnLock({
					to_user_id: this.to_user_id,
					type: this.modelType
				}).then(res => {
					this.$Toast('解锁成功')
					// this.showModal = false
					this.$emit('success', this.to_user_id)
				}).catch(error => {
					// this.showModal = false
				})
			},
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
				}).catch(error=>{
					this.$Toast('服务器错误或网络异常请刷新重试')
					this.$emit('close')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		width: 90vw;
		min-height: 440rpx;
		box-sizing: border-box;
		padding: 38rpx 44rpx 82rpx;
		box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 20%);
		position: relative;

		.popup-close {
			position: absolute;
			right: 0;
			top: -120rpx;
			width: 88rpx;
			height: 88rpx;
		}

		.popup-title {
			font-weight: 600;
			font-size: 44rpx;
			color: #323334;
			margin-bottom: 70rpx;
			text-align: center;
		}

		.popup-list {
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-top: 30rpx;
			
			.popup-item2{
				height: 88rpx;
				padding: 0rpx 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
			}

			.popup-item {
				height: 88rpx;
				padding: 0rpx 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				background: #F7F7F7;
				border-radius: 16rpx;

				.item-left {
					display: flex;
					align-items: center;

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>